BootstrapVue — Toasts, Alerts, and Tooltips

To make good looking Vue apps, we need to style our components.

To make our lives easier, we can use components with styles built-in.

In this article, we look at how to customize toasts.

We also look at how to add alerts and tooltips.

Toaster Target

We can change the placement of the toasts.

We can set the toaster property to change the placement of a toast.

The following are the possible values of this property:

• b-toaster-top-right
• b-toaster-top-left
• b-toaster-top-center
• b-toaster-top-full
• b-toaster-bottom-right
• b-toaster-bottom-left
• b-toaster-bottom-center
• b-toaster-bottom-full

For example, we can write:

<template>
  <div id="app">
    <b-button @click="makeToast()">Show toast</b-button>
  </div>
</template>
<script>
export default {
  name: "App",
  methods: {
    makeToast() {
      this.$bvToast.toast(`hello`, {
        title: "toast",
        autoHideDelay: 5000,
        toaster: "b-toaster-bottom-right"
      });
    }
  }
};
</script>

We changed toaster to “b-toaster-bottom-right” , so the toast will be displayed on the bottom right.

Prepend or Append

We can set the append-toast prop of b-toast to true to append the toast.

Auto-Hide

To disable auto-hide of a toast, we can set no-auto-hide to true .

Links

We can create toasts with a link.

To do that, we set the href property.

For example, we can write:

<template>
  <div id="app">
    <b-button [@click](http://twitter.com/click "Twitter profile for @click")="makeToast()">Show toast</b-button>
  </div>
</template>
<script>
export default {
  name: "App",
  methods: {
    makeToast() {
      this.$bvToast.toast(`hello`, {
        title: "toast",
        autoHideDelay: 5000,
        href: 'http://example.com'
      });
    }
  }
};
</script>

We have the href property that makes the content a link.

So ‘hello’ will be a link.

b-toast

To add our content to a toast more easily, we can use the b-toast component.

To populate the title, we can populate the toast-title slot.

For example, we can write:

<template>
  <div id="app">
    <b-button @click="$bvToast.show('toast')">Show toast</b-button>

    <b-toast id="toast">
      <template v-slot:toast-title>
        <div>
          <b-img blank blank-color="#ff5555" class="mr-2" width="12" height="12"></b-img>title
        </div>
      </template>
      <p>content</p>
    </b-toast>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

We create a toast with the b-toast component.

To show the toast, we added a button.

The $bvToast.show(‘toast’) method call is called with the ID of the toast.

This way, the toast can be opened.

Within the toast-title slot, we have the b-img component to display an image.

We also have the content below it.

Now we get a toast that has images in it.

The default slot has the toast body and consists of anything that’s outside the other slots.

Alerts versus Toasts

We can use the b-alert component to show a simple alert.

For example, we can write:

<template>
  <div id="app">
    <b-button @click="show = !show">Show Alert</b-button>

    <b-alert
      v-model="show"
      class="position-fixed"
      style="z-index: 2000;"
      variant="warning"
      dismissible
    >alert!</b-alert>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      show: false
    };
  }
};
</script>

The b-alert takes a v-model to determine when it’s shown.

If show is true then the alert will be shown.

class is the CSS classes to apply.

style is the style to apply.

dismissible lets us close the alert with a close button.

variant lets us change the style variant.

Tooltips

We can add tooltip elements or components with the b-tooltip component.

Also, we can use the v-b-tooltip directive to add a tooltip.

For example, we can write:

<template>
  <div id="app">
    <b-button v-b-tooltip.hover title="Tooltip">Hover Me</b-button>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

We added the v-b-tooltip directive with the hover modifier.

hover means the tooltip is shown on hover.

The title is the title of the tooltip.

Alternatively, we can write:

<template>
  <div id="app">
    <b-button id="tooltip">Hover Me</b-button>
    <b-tooltip target="tooltip" triggers="hover">tooltip</b-tooltip>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

We set the ID of the button to tooltip , which matches the value of target .

This way, it can be opened.

triggers lets us set which even triggers the tooltip.

Then we get the same result as the previous example.

Conclusion

We can add a tooltip with the v-b-tooltip directive or the b-tooltip component.

Alerts are simpler toasts that can’t have as much custom content.

Toasts can be opened in different positions of the page.